<template>
  <div class="company-style-inner">
    <div class="company-style" v-for="(item,index) in chamberCommerceStyleList" :key="index" @click="navigateToChamberCommerceStyle(item)">
      <div class="company-style-list" >
        <div class="company-style-list-title">{{item.name}}</div>
        <div class="company-style-list-dsc">{{item.desc}}</div>
        <div class="company-style-list-img">
          <img :src="item.img_url" mode="widthFix">
          <div class="company-style-list-time">{{item.start_time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      chamberCommerceStyleList:[],
      limit: 4, //条数
      page: 1, //页码
    }
  },
  components:{
  },
  onShow(){
    this.page = 1;
    this.reqChamberCommerceStyleList('onPullDownRefresh');
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqChamberCommerceStyleList();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page = 1; 
    this.reqChamberCommerceStyleList('onPullDownRefresh');
  },
  methods:{
    // 获取企业风采列表
    async reqChamberCommerceStyleList(type){
      let res = await this.$api.getChamberCommerceStyleList();
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        let data = res.data.data;
        if(type == 'onPullDownRefresh'){
          this.chamberCommerceStyleList = data;
        }else{
          this.chamberCommerceStyleList = this.chamberCommerceStyleList.concat(data);
        }
      }else{
        wx.showToast({
          title: '获取企业风采列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到企业风采详情
    navigateToChamberCommerceStyle(chamber){
      wx.navigateTo({
        url: '/pages/homeMain/chamberCommerceStyle/main?id=' + chamber.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.company-style-inner{
  background-color: #f1f1f1;
  min-height: 100vh;
  .company-style{
    padding: 0 40rpx 20rpx;
    width: 100%;
    margin-bottom: 14rpx;
    background-color: #fff;
    .company-style-list{
      padding-top: 20rpx;
      padding-bottom: 30rpx;
      .company-style-list-title{
        margin-bottom: 16rpx;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #666;
        font-weight: bold;
      }
      .company-style-list-dsc{
        margin-bottom: 16rpx;
        font-size: 24rpx;
        color: #979696;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .company-style-list-img{
        position: relative;
        max-height: 350rpx;
        overflow: hidden;
        border-radius: 10rpx;
        img{
          width: 100%;
          border-radius: 10rpx;
        }
        .company-style-list-time{
          position: absolute;
          bottom: 0;
          left: 0;
          border-radius: 0 0 10rpx 10rpx;
          background-color: rgba(0 ,0, 0, .5);
          color: #fff;
          font-size: 24rpx;
          width: 100%;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 20rpx;
        }
      }
    }
  }
}
  
</style>